<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
      vue中的事件绑定 
      语法：
        标准：v-on:事件名="事件方法" 事件方法可以写小括号，也可以不写小括号
        简写：@事件名="事件方法" 事件方法可以写小括号，也可以不写小括号
      在元素中绑定好事件后，一定要在vue配置中添加一个methods配置，在其配置中实现对应的事件方法。

    -->
    <button v-on:click="clickVueBtn">我是vue中的按钮</button>

  </div>

  <!-- html中的事件绑定的方法要写上小括号 -->
  <button onclick="clickBtn()">我是一个按钮</button>

  <script>

    function clickBtn() {
      console.log('clickBtn')
    }

    new Vue({
      el: '#app',
      data: {
        title: '我是标题'
      },
      // methods定义的方法一定要用function方案不能使用箭头函数定义，如果使用箭头函数定义，则this将跑偏
      // 注：定义的方法里面建议用箭头函数，原因在于保持this的指向
      methods: {
        // clickVueBtn:function(){console.log('clickVueBtn-function')},
        clickVueBtn() {
          const fn = () => console.log(this.title);
          fn()
        }
      }
    })
  </script>
</body>

</html>